<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view v-if="data.join==false">
					<view class="top">
						<image :src="data.__wxapp_img.step.join_bg.url"></image>
						<view class="title">
							<text class="dare-name">{{data.name}}</text>
							<text>{{data.step_num}}步挑战赛</text>
						</view>
						<view class="time">比赛时间：{{data.open_date}} 00:00-23:59</view>
					</view>
					<view class="msg">
						<view class="text">使用{{data.dapp.option.step.currency_name?data.dapp.option.step.currency_name:'活力币'}}参赛</view>
						<view>
							<text class="use-price">{{data.bail_currency}}</text>个</view>
					</view>
					<view class="content">
						<view class="content-title">参赛步骤</view>
						<view class="content-body">
							<view class="content-num">
								<image src="../../static/step/one.png"></image>
							</view>
							<view class="content-text">
								<view class="step-title">报名参赛</view>
								<view>使用{{data.bail_currency}}个{{dapp.option.step.currency_name?dapp.option.step.currency_name:'活力币'}}参赛</view>
							</view>
						</view>
						<view class="content-body">
							<view class="content-num">
								<image src="../../static/step/two.png"></image>
							</view>
							<view class="content-text">
								<view class="step-title">比赛日行走达{{data.step_num}}步</view>
								<view>比赛日完成并提交{{data.step_num}}步行走</view>
							</view>
						</view>
						<view class="content-body">
							<view class="content-num">
								<image src="../../static/step/three.png"></image>
							</view>
							<view class="content-text">
								<view class="step-title">获得{{data.dapp.option.step.currency_name?dapp.option.step.currency_name:'活力币'}}奖励</view>
								<view>挑战结束，达标用户可平分奖池{{data.dapp.option.step.currency_name?dapp.option.step.currency_name:'活力币'}}</view>
							</view>
						</view>
					</view>
					<view class="join">
						<button @click="apply" class="join-btn">立即报名</button>
					</view>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					name: 0,
					open_date: "",
					step_num: 0,
					bail_currency: 0,
					join: !1
				},
			};
		},
		onLoad: function(e) {myVue = this;
			myVue.getApp.page.onLoad(this, e);
			var t = this,
				a = void 0;
			null == e.id ? t.getApp.core.reLaunch({
				url: "../index/index"
			}) : a = e.id, t.getApp.core.showLoading({
				title: "数据加载中...",
				mask: !0
			}), t.getApp.request({
				url: t.getApp.api.step.activity_detail,
				data: {
					activity_id: a
				},
				success: function(e) {
					t.getApp.core.hideLoading();
					var i = e.data.list.open_date.replace(".", "/").replace(".", "/");
					t.setData({
						id: a,
						name: e.data.list.name,
						open_date: i,
						step_num: e.data.list.step_num,
						bail_currency: e.data.list.bail_currency
					});
				}
			});
		},
		onShareAppMessage: function(e) {
			return myVue.getApp.page.onShareAppMessage(this), {
				path: "/step/dare/dare?user_id=" + myVue.getApp.getUser().id,
				title: this.data.title ? this.data.title : "步数挑战"
			};
		},
		methods: {
			apply: function() {
				var e = this;
				e.getApp.request({
					url: e.getApp.api.step.activity_join,
					data: {
						activity_id: e.data.id
					},
					success: function(t) {
						var a = e.data.open_date.slice(5);
						0 == t.code ? e.getApp.core.redirectTo({
							url: "../dare/dare?open_date=" + a + "&join=true"
						}) : "活力币不足" == t.msg && e.data.dapp.option.step.currency_name ? e.getApp.core.showModal({
							content: e.data.dapp.option.step.currency_name + "不足",
							showCancel: !1
						}) : e.getApp.core.showModal({
							content: t.msg,
							showCancel: !1
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.top { 
		height: 200upx; 
		color: #fff; 
		font-size: 12pt; 
		text-align: center; 
		position: relative; 
	} 
 
	.top image { 
		width: 100%; 
		height: 100%; 
	} 
 
	.title { 
		position: absolute; 
		width: 100%; 
		text-align: center; 
		top: 42upx; 
		height: 35upx; 
		line-height: 35upx; 
	} 
 
	.dare-name { 
		display: inline-block; 
		width: 65%; 
		overflow: hidden; 
		text-overflow: ellipsis; 
		white-space: nowrap; 
		height: 35upx; 
		line-height: 35upx; 
		margin-bottom: -3upx; 
	} 
 
	.time { 
		position: absolute; 
		width: 100%; 
		text-align: center; 
		top: 87upx; 
	} 
 
	.msg { 
		height: 200upx; 
		width: 93.6%; 
		background-color: white; 
		margin: 0 24upx; 
		color: #999; 
		text-align: center; 
		font-size: 10pt; 
		padding: 40upx 40upx; 
		border-radius: 16upx; 
		position: absolute; 
		top: 160upx; 
	} 
 
	.text { 
		margin-bottom: 18upx; 
	} 
 
	.use-price { 
		font-size: 25pt; 
		font-family: 'DIN'; 
		color: #ff9d1e; 
		margin-right: 6upx; 
	} 
 
	.content { 
		background-color: white; 
		margin-top: 180upx; 
		font-size: 11pt; 
		color: #999; 
		padding-bottom: 50upx; 
	} 
 
	.content-title { 
		padding-left: 24upx; 
		height: 87upx; 
		line-height: 87upx; 
		border-bottom: 1upx solid #e2e2e2; 
		color: #353535; 
	} 
 
	.content-body { 
		padding: 40upx 56upx 30upx; 
	} 
 
	.content-num { 
		float: left; 
		height: 80upx; 
		width: 40upx; 
		margin-right: 32upx; 
	} 
 
	.content-num image { 
		height: 40upx; 
		width: 40upx; 
	} 
 
	.step-title { 
		font-size: 12pt; 
		color: #353535; 
		margin-bottom: 10upx; 
	} 
 
	.join { 
		position: fixed; 
		bottom: 0; 
		height: 150upx; 
		width: 100%; 
		background-color: white; 
		padding: 35upx 0; 
	} 
 
	.join-btn { 
		height: 80upx; 
		width: 702upx; 
		font-size: 13pt; 
		color: #fffefe; 
		background: linear-gradient(to right, #ff9d1e, #ffb71e); 
		border-radius: 40upx; 
	} 
 
	button::after { 
		border: none; 
	}
</style>
